<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FORM MAIL</title>
<%include file="_head.html"/>

<link rel="stylesheet" href="/_paneo/common/codemirror/lib/codemirror.css">
<script src="/_paneo/common/codemirror/lib/codemirror.js"></script>
<script src="/_paneo/common/codemirror/mode/xml/xml.js"></script>
<script src="/_paneo/common/codemirror/mode/javascript/javascript.js"></script>
<script src="/_paneo/common/codemirror/mode/css/css.js"></script>
<script src="/_paneo/common/codemirror/mode/htmlmixed.js"></script>
<style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-scroll {
  overflow: auto;
  height: auto; overflow: visible;
  position: relative;
  outline: none;
  height: 600px;
}
</style>

</head>
<body>

<div class="navbar navbar-fixed-top">

<%include file="_header.html" />

</div>

<div class="container-fluid">

<div class="row-fluid">

<div class="span2">
<!--Sidebar content-->
    <%include file="_sidebar.html" />
</div>
<div class="span10">
    <div id="content">
    <h1>PANEO FORM MAIL 
    %if mode == 'list' or mode == 'new':
    <a href="/paneo/formmail/new/" class="btn" style="margin-left:30px;">新しいFORMの追加</a>
    %elif mode == 'view':
    <a href="/paneo/formmail/" class="btn" style="margin-left:30px;">一覧に戻る</a>
    %elif mode == 'edit':
    <a href="/paneo/formmail/form/${key}/" class="btn" style="margin-left:30px;">FORMに戻る</a>
    %endif
    </h1>

    <hr>
    <div>
    PANEO FORM MAILはGmailを利用します。フォームメールに利用するGmailアカウントをご用意ください。<br>
    また、Gmailでは、別名送信をサポートしています。<br>
    Google Appsをご利用でない場合は、Gmailアカウントへの別名送信の設定をお願い致します。<br>
    <br>
    <span class="label label-warning">※重要！！ 必ず可能な入力パターン複数のフォーム送信確認を実施してください。</span>
    </div>
    <hr>

    %if mode == "list":
    <table class="table table-striped pages-list">
    <thead>
    <tr>
    <th class="c1"></th>
    <th class="c1">key</th>
    <th class="c1">formname</th>
    </tr>
    </thead>
    <tbody>
    %for k,v in formmail.items():
    <tr>
    <td>
    <a href="/paneo/formmail/form/${k}/" class="btn">編集</a>
    </td>
    <td>${k}</td>
    <td>
    <a href="/formmail_${k}.html" target="_blank" class="icon-share-alt"></a>
    ${v.get('name')}
    </td>
    </tr>
    %endfor
    </tbody>
    </table>
    %endif

    %if web.ctx.has_key('MSG') :
    <div class="label label-important" style="font-size:130%;padding:5px;">${web.ctx.MSG}</div>
    %endif

    %if mode == "new":
    <form class="form-horizontal"  enctype="multipart/form-data" method="POST">
    <fieldset>
    <legend>FORM MAILの新規作成</legend>
        <div class="control-group">
            <label class="control-label" for="KEY">FORM KEY</label>
            <div class="controls">
            <input type="text"  class="input-small" id="KEY" name="KEY" value="${formmail.get('key')}">
            <p class="help-block">defaultは編集できません <span class="label label-warning">半角英数字で記号や先頭文字が数値はNG</span></p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="KEY">FORM NAME</label>
            <div class="controls">
            <input type="text" class="input-xlarge span5" id="NAME" name="NAME" value="${formmail.get('name')}">
            <p class="help-block"></p>
            </div>
        </div>

        <div class="form-actions">
            <button class="btn btn-primary" type="submit">登録する</button>
            <button class="btn" type="reset" style="margin-left:20px;">Cancel</button>
        </div>
    </fieldset>
    </form>
    %endif

    %if mode == "view":
    <table class="table table-striped pages-list">
    <thead>
    <tr>
    <th class="c1"></th>
    <th class="c1">テンプレート名</th>
    <th class="c1">filename</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>
    <a href="/paneo/formmail/edit/${key}/hed/" class="btn">編集</a>
    </td>
    <td>フォームヘッダー</td>
    <td>formmail_${key}_hed.html</td>
    </tr>
    <tr>
    <td>
    <a href="/paneo/formmail/edit/${key}/ftr/" class="btn">編集</a>
    </td>
    <td>フォームフッター</td>
    <td>formmail_${key}_ftr.html</td>
    </tr>
    <td>
    <a href="/paneo/formmail/edit/${key}/ent/" class="btn">編集</a>
    </td>
    <td>入力フォーム</td>
    <td>formmail_${key}_ent.html</td>
    </tr>
    <tr>
    <td>
    <a href="/paneo/formmail/edit/${key}/thx/" class="btn">編集</a>
    </td>
    <td>完了フォーム</td>
    <td>formmail_${key}_thx.html</td>
    </tr>
    <tr>
    <td>
    <a href="/paneo/formmail/edit/${key}/msg/" class="btn">編集</a>
    </td>
    <td>メール文面</td>
    <td>formmail_${key}_msg.html</td>
    </tr>
    </tbody>
    </table>

    <hr> 

    <form class="form-horizontal"  enctype="multipart/form-data" method="POST">
    <fieldset>

    <legend>
        FORM MAILの設定&nbsp;
        <a href="/forms/formmail_${key}.html" target="_blank" class="icon-share-alt"></a>
        <span>URL:&nbsp;/forms/formmail_${key}.html</span>
    </legend>

        <% f = formmail.get(key) %>
        <div class="control-group">
            <label class="control-label" for="KEY">FORM KEY</label>
            <div class="controls">
            <input type="text"  class="input-small ${'disabled' if key=='default' else ''}" ${'readonly="readonly"' if key=='default' else '' } id="KEY" name="KEY" value="${key}">
            %if key != 'default':
            <button class="btn" type="submit" name="FORMMAIL_KEYCHANGE">KEY変更する</button>
            %endif
            <p class="help-block">defaultは編集できません <span class="label label-warning">半角英数字で記号や先頭文字が数値はNG</span></p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="KEY">FORM NAME</label>
            <div class="controls">
            <input type="text" class="input-xlarge span5" id="NAME" name="NAME" value="${f.get('name')}">
            <p class="help-block"></p>
            </div>
        </div>


        <hr>
        <div class="control-group">
            <label class="control-label" for="PAGEID">PAGEID<br>(HTMLファイル名)</label>
            <div class="controls">
            <input type="text" class="input-xlarge span5" id="PAGEID" name="PAGEID" value="${f.get('pageid')}">
            <p class="help-block">ページのナビゲーションに利用されます。未指定の場合はindex(HOME)</p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="FORMCSS">Use Form CSS</label>
            <div class="controls">
            <input type="checkbox" id="FORMCSS" name="FORMCSS" value="True" ${ 'checked="checked"' if f.get('formcss') == 'True' else '' }>
            <span style="">FORM CSSスタイルにpaneo標準 form.cssを利用する</span>
            <p class="help-block"></p>
            </div>
        </div>
        <hr>

        <div class="control-group">
            <label class="control-label" for="ACCOUNT">ACCOUNT</label>
            <div class="controls">
            <input type="text" class="input-xlarge span3" id="ACCOUNT" name="ACCOUNT" value="${f.get('account')}">
            <p class="help-block">gmailの場合でも@gmail.comを含めて入力してください。</p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="PASSWORD">PASSWORD</label>
            <div class="controls">
            <input type="text" class="input-xlarge span3" id="PASSWORD" name="PASSWORD" value="${f.get('password')}">
            <p class="help-block"></p>
            </div>
        </div>

        <hr>

        <div class="control-group">
            <label class="control-label" for="SUBJECT">SUBJECT</label>
            <div class="controls">
            <input type="text" class="input-xlarge span6" id="SUBJECT" name="SUBJECT" value="${f.get('subject')}">
            <p class="help-block"></p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="MAILFROM">FROM Address</label>
            <div class="controls">
            <input type="text" class="input-xlarge span6" id="MAILFROM" name="MAILFROM" value="${f.get('mailfrom')}">
            <p class="help-block">指定がない場合はACCONTを利用します。</p>
            </div>
        </div>

        <div class="form-actions">
            <button class="btn btn-primary" type="submit">更新する</button>
            <button class="btn" type="reset" style="margin-left:20px;">Cancel</button>
            %if key != 'default':
            <button class="btn btn-danger" name="FORMMAIL_DELETE" style="margin-left:50%;">削除する</button>
            %endif
        </div>
        <hr>

        <legend>FORMで利用する画像のアップロード</legend>
        <div class="label label-important">標準テンプレートではフォーム画像1をヘッダー画像として利用しています。</div>
        <% img_alt = ( formmail.get(key).get('IMG') if formmail.get(key).get('IMG') else {} ) %>
        %for i in range(1,11):
        <div class="control-group">
        <label class="control-label" for="simg${i}">
        フォーム画像${i}
        <div>
        %if form_img[ 'form_%s_img%s_file' % (key,i) ][0] : 
        <img src="//${web.ctx.host}/_cms_templates/img/form_${key}_img${i}">
        %endif
        </div>
        name:form_${key}_img${i}
        </label>
        <div class="controls">
        <span class="label help-block">画像 FILE UPLOAD</span> 
        <input type="file" id="form_${key}_img${i}_file" name="form_${key}_img${i}_file" size="20"><br>
        <input type="checkbox" id="form_${key}_img${i}_file_del" name="form_${key}_img${i}_file_del" value="True">
        <span class="help-inline">
        アップロードした画像を削除する場合はチェックしてください。 
        </span>
        <span class="label help-block">画像代替えテキスト</span> 
        <input type="text" id="form_${key}_img${i}_alt" name="form_${key}_img${i}_alt" class="input-xlarge" style="width:98%;" value="${img_alt.get('form_%s_img%s_alt'%(key,i)) if img_alt.get('form_%s_img%s_alt'%(key,i)) else ""}">
        %if form_img[ 'form_%s_img%s_file' % (key,i) ][0] : 
        <% t = '<div class="paneoimg"><img src="//%s%s" alt="%s"></div>' % ( web.ctx.host , form_img['form_%s_img%s_file' %( key, i )][1] , img_alt.get('form_%s_img%s_alt'%(key,i)) ) %> 
        <span class="label help-block">画像タグ</span> 
        <pre>${ t| h }</pre>
        %endif
        </div>
        </div>
        <hr>
        %endfor

        <div class="form-actions">
            <button class="btn btn-primary" type="submit">更新する</button>
            <button class="btn" type="reset" style="margin-left:20px;">Cancel</button>
        </div>


    </fieldset>
    </form>
    %endif

    %if mode=="edit":
    <form class="form-horizontal"  enctype="multipart/form-data" method="POST">
    <fieldset>
    <legend>FORM MAILのTEMPLATE ${typename}</legend>
    <textarea id="HTMLTEMPLATE" name="HTMLTEMPLATE" class="input-xlarge" >${html_file|h}</textarea>
    <div class="form-actions">
        <button class="btn btn-primary" type="submit">更新する</button>
        <button class="btn" type="reset" style="margin-left:20px;">Cancel</button>
    </div>
    </fieldset>
    </form>
    %endif


    </div><!--/div#content row span-->
</div>

</div><!--/row-->

</div><!--/container-fluid"-->

<hr>

<%include file="_footer.html" />

</div><!--/.fluid-container-->

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("HTMLTEMPLATE"), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true,
    matchBrackets: true,
    indentUnit: 4,
    indentWithTabs: true,
    enterMode: 'keep',
    lineWrapping: true,
//    onCursorActivity: function() {
//        editor.setLineClass(hlLine, null, null);
//        hlLine = editor.setLineClass(editor.getCursor().line, null, 'activeline');
//    },
//    onChange: function(){
//        editor.save();
//    }
});
</script>

</body>
</html>


